import { useEffect, useRef } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import flvjs from "flv.js"
import { AccountBookTwoTone, EyeTwoTone, LikeTwoTone, QqOutlined } from '@ant-design/icons'

function Index() {
    // 实例化
    const { state } = useLocation()
    const navigate = useNavigate()
    const videoRef = useRef<any>(null)
    const flvPlayerRef = useRef<any>(null)
    const flvUrl = "http://localhost:8000/live/demo1.flv"

    useEffect(() => {
        if (flvjs.isSupported()) {
            flvPlayerRef.current = flvjs.createPlayer({
                type: "flv",
                isLive: true,     //是否为直播流
                url: flvUrl,
            });
            flvPlayerRef.current.attachMediaElement(videoRef.current);
            flvPlayerRef.current.load();
            flvPlayerRef.current.play();
        }

        return () => {
            if (flvPlayerRef.current) {
                flvPlayerRef.current.unload()
                flvPlayerRef.current.detachMediaElement()
                flvPlayerRef.current.destroy()
            }
        }
    }, [])

    // 返回
    const backLive = () => {
        navigate("/main/zhibo")
    }
    //强制关闭
    const endLive = () => {
        flvPlayerRef.current.destroy()
    }
    return (
        <div className='boxWrap'>
            <header>
                <span>{state.name}直播间</span>
                <span>{state.title}</span>
                <span></span>
            </header>
            <main>
                <ul className="left">
                    <li><EyeTwoTone />当前观看人数:{state.watch}人</li>
                    <li><QqOutlined />当前关注人数:{state.hot}人</li>
                    <li><LikeTwoTone />当前点赞人数:{state.sales}人</li>
                    <li><AccountBookTwoTone />当前下单人数:{state.sell}人</li>
                </ul>
                <div className='right'>
                    <video src="" ref={videoRef} controls className='vd'></video>
                    <div className='btn'>
                        <button onClick={backLive}>返回</button>
                        <button onClick={endLive}>强制关闭</button>
                    </div>
                </div>
            </main>
        </div>
    )
}

export default Index
